<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="query.searchValue"
            placeholder="请输入单位名称/店招名"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.grouping"
            clearable
            placeholder="请选择分组"
          >
            <el-option
              v-for="(item, index) in list"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-button
            type="primary"
            @click="
              query.page = 1;
              getList();
            "
            >查询</el-button
          >
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="storeName" label="店招名"> </el-table-column>
        <el-table-column
          prop="supIdentify"
          label="统一社会信用代码"
          width="180px"
        ></el-table-column>

        <el-table-column prop="supUnitName" label="单位名称"> </el-table-column>
        <el-table-column
          prop="newLicenseNo"
          label="许可证号"
          width="180px"
        ></el-table-column>
        <el-table-column prop="grouping" label="分组" width="100px">
        </el-table-column>
        <el-table-column prop="identify" label="联系人" width="150px">
          <template slot-scope="scope">
            {{ scope.row.contacts }}({{ scope.row.contactNumberTrue }})
          </template>
        </el-table-column>
        <el-table-column prop="indexScore" label="精准画像" width="80px">
        </el-table-column>

        <el-table-column
          prop="inclusionDateStr"
          label="纳入日期"
          width="100px"
        ></el-table-column>

        <el-table-column prop="" label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="view(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.pageIndex"
      />
    </el-card>

    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看单位详情"
      width="70%"
    >
      <el-header>
        <div class="title_wapper">
          <el-progress
            :width="100"
            :stroke-width="12"
            color="#1890ff"
            type="circle"
            :format="() => 100"
            :percentage="100"
          ></el-progress>
          <div class="title_right">
            <div class="title">
              {{ data.storeName }}
            </div>
            <div>联系人：{{ data.contacts }}({{ data.contactNumberTrue }})&nbsp;&nbsp;&nbsp;&nbsp;纳入日期：{{ data.inclusionDateStr }}</div>
            <div>
                      <el-tag type="primary" v-if="data.excellent == 1">优秀商户</el-tag>
        <el-tag type="primary" v-if="data.guard == 1">苏食卫士</el-tag>
        <el-tag type="primary" v-if="data.isBKitchen == 1">明厨亮灶</el-tag>
        <el-tag type="primary" v-if="data.isWcMethod == 1">五常法</el-tag>
        <el-tag type="primary" v-if="data.insurance == 1">保险签署</el-tag>
            </div>
          </div>
        </div>
        <rz-height></rz-height>
        <!-- <el-row :gutter="20">
          <el-col :span="8">统一社会信用代码：{{ data.identify }}</el-col>
          <el-col :span="12">营业执照名称：{{ data.unitName }} </el-col>
        </el-row>
        <rz-height></rz-height>
        <rz-height></rz-height>
        <el-row :gutter="20">
          <el-col :span="8">注册日期：{{ data.inclusionDateStr }}</el-col>
          <el-col :span="12"
            >地址：{{ data.productionAddress || data.address }}</el-col
          >
        </el-row>
        <rz-height></rz-height>
        <rz-height></rz-height> -->

      </el-header>
      <el-form label-width="80px">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" label-width="150px">
              {{ information.identify }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位名称">
              {{ information.unitname }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="类型">
              {{ information.corptype }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册日期">
              {{ information.establishdateStr }}
            </el-form-item></el-col
          >
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="核准日期">
              {{ information.issuedateStr }}
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="登记机关">
              {{ information.regorgan }}
            </el-form-item></el-col
          >
        </el-row>

        <template v-if="information.newlicenseno">
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item label="许可证号">
                {{ information.newlicenseno }}
              </el-form-item>
            </el-col>
            <el-col :span="12"
              ><el-form-item label="单位业态">
                {{ information.bodyindustry }}
              </el-form-item></el-col
            >
          </el-row>
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item label="发证日期">
                {{ information.certificationcreatedateStr }}
              </el-form-item>
            </el-col>
            <el-col :span="12"
              ><el-form-item label="有效期至">
                {{ information.validitydateStr }}
              </el-form-item></el-col
            >
          </el-row>
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item label="管理机构">
                {{ information.regorgan }}
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
import calendar from "@/views/enterprise/components/calendar";

import {
  findListByCondition,
  findGroupingList,
  getCompanyId,
  findResponseById,
} from "@/api/modules/workstation";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
    this.findGroupingList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      //   options: ["合格", "不需要考核"],
      query: {
        excellent: "-1",
        ffoodSafetyId: sessionStorage.getItem("workId"),
        grouping: "",
        guard: "-1",
        insurance: "-1",
        isBKitchen: "-1",
        isPage: 0,
        isWcMethod: "-1",
        page: 1,
        pageSize: 10,
        searchValue: "",
        status: [3],
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      data: {},
      list: [],
      information: {},
    };
  },
  // 方法
  methods: {
    getList() {
      findListByCondition(this.query).then((res) => {
        this.total = res.totalCount;
        this.tableData = res.data;
      });
    },
    findGroupingList() {
      findGroupingList({
        params: {
          workStationId: sessionStorage.getItem("workId"),
        },
      }).then((res) => {
        this.list = res.data;
      });
    },
    view(e) {
      // console.log(e);
      // this.data = e;
      // this.dialogVisible = true;
          // sessionStorage.removeItem("menuSelect");
          // // sessionStorage.removeItem("menuSelect");
          // sessionStorage.setItem("router",'/workstation/businessUnit')
          
      // sessionStorage.setItem("id", e.fSuperviseUnitId);

      //  sessionStorage.setItem("id", e.fSuperviseUnitId);
          sessionStorage.setItem("newLicenseNo", e.newLicenseNo);
      sessionStorage.setItem("interpretation", e.fSuperviseUnitId);
      this.$router.push({
        path: "/interpretation/home?url=/workstation/businessUnit?route=/workstation/businessUnit",
        // query: { id: e.id },
      });
      // this.$router.push({ path: "/enterprise/home" });
      // getCompanyId({
      //   params: { id: e.id },
      // }).then((res) => {
      //   this.data = res.data;
      //   findResponseById({
      //     params: { id: e.fSuperviseUnitId },
      //   }).then((res) => {
      //     this.information = res.data;
      //     this.dialogVisible = true;
      //   });
      // });
    },

    // findCertificateAndTicketById
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    calendar,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  .el-header {
    padding: 20px;
    height: auto !important;

    .title_wapper {
      display: flex;
      .title {
        font-size: 25px;
        font-weight: 700;
      }

      .el-tag {
        margin-right: 10px;
      }
      .title_right {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding-left: 20px;
      }
      /deep/ .el-progress__text {
        font-size: 18px !important;
      }
    }
    .el-tag {
      margin-right: 10px;
    }
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>